<template>
  <div class="model">
    <div class="model-mask"></div>
    <div class="model-pop">
      <div class="close" @click="handleClose"></div>
      <div class="model-form" v-if="type === 1">
        <a-form-model ref="modifyPwdForm" :model="modifyPwdForm" :rules="rules">
          <h3 class="title">修改密码</h3>
          <a-form-model-item prop="oldpassword">
            <a-input
              v-model="modifyPwdForm.oldpassword"
              type="password"
              autocomplete="off"
              placeholder="密码(6至12位数字或字母)"
              @focus="clearValidate('modifyPwdForm', 'oldpassword')"
            >
              <template slot="prefix">
                <div class="label-prefix">
                  <YxpIcon type="iconlogin_icon_password" />
                  <span>原密码</span>
                </div>
              </template>
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="password">
            <a-input
              v-model="modifyPwdForm.password"
              type="password"
              autocomplete="off"
              placeholder="密码(6至12位数字或字母)"
              @focus="clearValidate('modifyPwdForm', 'password')"
            >
              <template slot="prefix">
                <div class="label-prefix">
                  <YxpIcon type="iconlogin_icon_password" />
                  <span>新密码</span>
                </div>
              </template>
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="repassword">
            <a-input
              v-model="modifyPwdForm.repassword"
              type="password"
              autocomplete="off"
              placeholder="密码(6至12位数字或字母)"
              @focus="clearValidate('modifyPwdForm', 'repassword')"
            >
              <template slot="prefix">
                <div class="label-prefix">
                  <YxpIcon type="iconlogin_icon_password" />
                  <span>确认密码</span>
                </div>
              </template>
            </a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-button
              type="primary"
              shape="round"
              size="large"
              block
              class="btn"
              html-type="submit"
              @click="submitForm"
            >
              确定
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="model-form model-phone" v-if="type === 2">
        <h3 class="title">修改安全手机</h3>
        <a-form-model
          ref="modifyPhoneForm"
          :model="modifyPhoneForm"
          :rules="phoneRules"
        >
          <a-form-model-item prop="oldmobile">
            <a-input
              v-model="modifyPhoneForm.oldmobile"
              :disabled="modifyPhoneForm.oldmobile !== ''"
              autocomplete="off"
              placeholder="请输入原手机号码"
              @focus="clearValidate('modifyPhoneForm', 'oldmobile')"
            >
              <template slot="prefix">
                <div class="label-prefix">
                  <YxpIcon type="iconmobile" />
                  <span>原手机号码</span>
                </div>
              </template>
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="newmobile">
            <a-input
              v-model="modifyPhoneForm.newmobile"
              autocomplete="off"
              placeholder="请输入新手机号码"
              @focus="clearValidate('modifyPhoneForm', 'newmobile')"
            >
              <template slot="prefix">
                <div class="label-prefix">
                  <YxpIcon type="iconmobile"></YxpIcon>
                  <span>新手机号码</span>
                </div>
              </template>
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="code">
            <a-input
              v-model="modifyPhoneForm.code"
              autocomplete="off"
              placeholder="请输入验证码"
              @focus="clearValidate('modifyPhoneForm', 'code')"
            >
              <template slot="prefix">
                <div class="label-prefix">
                  <YxpIcon type="iconregister_icon_yanzhengma1" />
                  <span>新手机短信验证</span>
                </div>
              </template>
            </a-input>
            <a-button
              type="primary"
              shape="round"
              :disabled="disabled"
              @click="getVerifyCode"
              >{{ btnTitle }}</a-button
            >
          </a-form-model-item>

          <a-form-model-item>
            <a-button
              type="primary"
              shape="round"
              size="large"
              block
              html-type="submit"
              class="btn"
              @click="submitForm"
            >
              确定
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Modal,
  FormModel,
  Input,
  Checkbox,
  Tabs,
  Select,
  Radio
} from "ant-design-vue";
import { validatePhone, validateNewPhone, validatePass } from "@/utils/form-validate";
import { postForm, sendSms, changePhone } from "@/services";
import { mapState, mapMutations } from "vuex";
import mTypes from "@/store/mutationsTypes";
export default {
  components: {
    AModal: Modal,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    AInput: Input,
    ACheckbox: Checkbox,
    ASelect: Select,
    ASelectOption: Select.Option,
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    ARadio: Radio,
    ARadioGroup: Radio.Group
  },
  props: {
    type: {
      type: Number,
      default: 1
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data() {
    return {
      modifyPwdForm: {
        password: "",
        repassword: "",
        oldpassword: ""
      },
      rules: {
        newmobile: [{ validator: validateNewPhone, trigger: "blur" }],
        oldmobile: [{ validator: validatePhone, trigger: "blur" }],
        code: [{ required: true, message: "此项不能为空", trigger: "blur" }],
        oldpassword: [{ validator: validatePass, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        repassword: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请重新输入密码"));
              } else if (value !== this.modifyPwdForm.password) {
                callback(new Error("两次密码输入不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      },
      modifyPhoneForm: {
        oldmobile: "",
        newmobile: "",
        code: ""
      },
      phoneRules: {
        oldmobile: [{ validator: validatePhone, trigger: "blur" }],
        newmobile: [{ validator: validateNewPhone, trigger: "blur" }],
        code: { required: true, message: "请输入验证码" }
      },
      disabled: false,
      btnTitle: "获取验证码"
    };
  },
  mounted () {
    let phone = window.localStorage.getItem('oldPhone')
    this.modifyPhoneForm.oldmobile = phone
    console.log(phone + '-----------------')
    if (phone !== '') {
      this.disabled = false
    } else {
      this.disabled = true
    }
    console.log(this.disabled + '**************')
  },
  methods: {
    submitForm() {
      if (this.type == 1) {
        this.$refs.modifyPwdForm.validate(async valid => {
          if (valid) {
            let res = await postForm("/usercenter/changepasswd", {
              password: this.modifyPwdForm.oldpassword,
              newpasswd: this.modifyPwdForm.password,
              repasswd: this.modifyPwdForm.repassword
            });
            if (res.code === 1) {
              this.$message.success("修改成功");
              this.$emit('model', false)
            } else this.$message.warn(res.info || "未知错误");
          }
        });
      } else {
        this.$refs.modifyPhoneForm.validate(async valid => {
          if (valid) {
            let res = await changePhone({
              ...this.modifyPhoneForm
            });
            if (res.code === 1) {
              this.$message.success("修改成功");
            } else this.$message.warn(res.info || "未知错误");
          }
        });
      }
    },
    clearValidate(form, filed) {
      this.$refs[form].clearValidate(filed);
    },
    getVerifyCode(e) {
      this.$refs.modifyPhoneForm.validateField(["oldmobile"], async valid => {
        if (!valid) {
          this.validateBtn();
          let code = await sendSms({
            username: this.modifyPhoneForm.oldmobile,
            type: 4
          });
          console.log(code);
        }
      });
    },
    validateBtn() {
      //倒计时
      let time = 60;
      this.disabled = true;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.disabled = false;
          this.btnTitle = "获取验证码";
        } else {
          this.btnTitle = time + "秒后重试";
          this.disabled = true;
          time--;
        }
      }, 1000);
    },
    handleClose() {
      this.$emit("model", false);
    }
  }
};
</script>
<style lang="less" scoped>
.model {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 2800px;
  height: 100%;
  min-width: 1200px;
  z-index: 120;
  &-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-width: 1200px;
    background: rgba(0, 0, 0, 0.5);
  }
  &-pop {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    min-height: 416px;
    background: #fff;
    border-radius: 10px;
    .close {
      position: absolute;
      right: 39px;
      top: 33px;
      width: 16px;
      height: 16px;
      background: url("../../assets/home/close.png") no-repeat;
      background-size: 16px 16px;
      cursor: pointer;
    }
    .btn {
      width: 360px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      background: linear-gradient(180deg, #13c998 0%, #27bfa3 100%);
      box-shadow: 0px 3px 6px rgba(23, 178, 145, 0.4);
      border-radius: 25px;
      margin: 12px auto 0;
      cursor: pointer;
    }
    .label-prefix {
      width: 84px;
    }
  }
  &-form {
    padding: 30px 40px 0 40px;
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #27bfa3;
      margin-bottom: 40px;
    }
  }
  .model-phone {
    /deep/.ant-input-prefix {
      width: 130px !important;
    }
    /deep/.ant-input {
      padding-left: 0;
    }
  }
  .label-prefix {
    width: 120px;
  }
}
/deep/.anticon {
  display: none;
}
/deep/.ant-form-item {
  margin-bottom: 39px;
}
/deep/.ant-input-prefix {
  display: block;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 72px;
  color: #24272B;
  padding-left: 10px;
  width: 78px;
}
/deep/.ant-input {
  background-color: #fff;
}
</style>
